<template>
	<view class="">
		<view class="jui_mar_2432 jui_pad_2432 jui_bg_fff jui_bor_rad_15">
			<view class="jui_mar_t14">付款方式</view>
			<radio-group style="width: 100%;padding: 30rpx 0;">
				<label class="jui_flex jui_flex_items_center">
					<image style="width: 40rpx; height: 40rpx;" src="../../../static/imgs/wx_pay.png" mode="aspectFit"></image>
					<text class="jui_flex1 jui_mar_l16">微信支付</text>
					<radio style="transform: scale(0.7);" checked />
				</label>
				<label class="jui_flex jui_flex_items_center">
					<image style="width: 40rpx; height: 40rpx;" src="../../../static/imgs/wx_pay.png" mode="aspectFit"></image>
					<text class="jui_flex1 jui_mar_l16">微信支付</text>
					<radio style="transform: scale(0.7);" checked />
				</label>
			</radio-group>
		</view>
			
		<view class="jui_public_btn jui_bg_fff jui_public_btn_radius" style="width:100%;position: fixed;bottom: 0;left: 0;">
			<button  @tap="submit()">确认</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabList:[
				{ value:'线下充值', type:0 },
				{ value:'线上充值', type:1 },
			],
			tabIndex:0,
			list: [
				{
					value: '支付宝',
					type:1
				},
				{
					value: '微信',
					type:2
				},
				{
					value: '银行卡',
					type:3
				}
			],
			current:0,
			img:'',
			showImg:'',
			info:{},
			subInfo:{
				type:"",
				money:"",
				img:""
			},
			config:0
		};
	},
	onNavigationBarButtonTap(e) {
		uni.navigateTo({
			url: 'rechargeLog'
		});
	},
	onLoad() {
		this.getset();
	},
	methods: {
		getset(){
			this.$api.getConfigTopUp().then(res => {
				if (res.code == 1) {
					this.config = res.data.config;
				}
			});
		},
		init(type) {
			this.$api.payType({type: type}).then(res => {
				if (res.ok) {
					
				}
			});
		},
		
		change(e) {
			this.current = e.index;
			this.init(e.orignItem.type);
		},
		submit(){
			if(!this.subInfo.money){
				return this.$msg("请输入充值金额")
			}
			if(this.tabIndex == 0){
				this.subInfo.type = this.list[this.current].type;
				if(this.subInfo.type == "" || this.subInfo.type == null || this.subInfo.type == undefined ){
					return this.$msg("请选择充值方式")
				}
				if(!this.subInfo.img){
					return this.$msg("请上传交易截图")
				}
				this.$api.addTopUp(this.subInfo).then(res => {
					if (res.code == 1) {
						this.$msg(res.msg);
						setTimeout(()=>{
							uni.navigateTo({
								url:`/pages/user/wallet/rechargeLog`
							})
						})
					}
				});
			}else{
				this.$api.setPay({money:this.subInfo.money}).then(r => {
					if (r.code == 1) {
						var info = r.data;
						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: info,
							success: function(res) {
								uni.navigateTo({
									url:`/pages/user/wallet/rechargeLog`
								})
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						});
						
					}
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.qrcode {
	margin-top: 40rpx;
	width: 210rpx;
	height: 64rpx;
	border-radius: 8px;
	font-weight: 400;
	color: #1876ff;
	line-height: 64rpx;
	text-align: center;
	background-color: rgba(24, 118, 255, 0.1);
}
.recharge_tab{
	position: sticky;
	top: 0;
	left: 0;
	z-index: 9;
	.recharge_tab_text{
		position: relative;
	}
	.recharge_tab_text::after{
		content: '';
		width: 40%;
		height: 3px;
		background-color: #fff;
		position: absolute;
		bottom: 0;
		left: 30%;
		z-index: 1;
	}
	.recharge_tab_text.active::after{
		content: '';
		width: 40%;
		height: 3px;
		background-color: $zhuse;
		border-radius: 2px;
		position: absolute;
		bottom: 0;
		left: 30%;
		z-index: 1;
	}
}
</style>
